<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div v-show="forward">
      <p>晚上是人自制力最为薄弱的时间段</p>
      <p>如果你想玩游戏，请先看完下边的文字</p>
      <p>
        如果你不想做这些loser，那就去对抗这五光十色的世界，忍得住寂寞，耐得住延迟满足。
        <br />
        <b>
          在漫长的等待时间里，你可能并不知道，自己所做的这一切，是不是值得。<b
            >但是坚持下去，有一天你会发现，过去所有的一切就像穿珠子一样，一颗一颗穿连成线。
          </b></b
        >
        <br />
        <b> 而这根线的终点，就在你手里。 </b>
        <br />
        <b> 最好的自控方法就是不碰。 </b>
      </p>
    </div>
    <p>{{ tipTitle }}</p>
    <button @click="start" v-if="forward">Start</button>
    <div v-if="meditationTip">
      <countdownTime :endTime="endTime" style="font-size: 24px"></countdownTime>
      <ul>
        <li>
          1、当你受到诱惑要做与长期利益相悖的事时，请想象一下，这个选择就意味着，你为了即时的满足感放弃了更好的长期奖励。
        </li>
        <li>2、想象你已经得到了长期的奖励。想象未来的你正在享受自控的成果。</li>
        <li>3、然后扪心自问：你愿意放弃它，来换取正在诱惑你的短暂快感吗？</li>
      </ul>
      <audio
        src="../assets/Kamal - Coming Home.mp3"
        controls="controls"
        autoplay="true"
      ></audio>
    </div>
  </div>
</template>

<script>
import countdownTime from "./countdown.vue";
import moment from "moment";
export default {
  name: "HelloWorld",
  components: {
    countdownTime,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      forward: true,
      meditationTip: false,
      endTime: null,
      tipTitle: "请冥想 10 分钟后，再决定是否要继续。",
    };
  },
  methods: {
    start() {
      this.forward = false;
      var et = moment().add(10, "m");
      this.endTime = et.format(); //
      this.meditationTip = true;
      this.msg = this.tipTitle;
      this.tipTitle = "";
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
